<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>video.js 7.1.0</title>
    <link href="./video-js.css" rel="stylesheet">
    <script src="./video.js"></script>

    <style type="text/css">
    	.vjs-paused .vjs-big-play-button,
		.vjs-paused.vjs-has-started .vjs-big-play-button {
		    display: block;
		}
		.video-js .vjs-big-play-button{
		    font-size: 2.5em;
		    line-height: 2.3em;
		    height: 2.5em;
		    width: 2.5em;
		    -webkit-border-radius: 2.5em;
		    -moz-border-radius: 2.5em;
		    border-radius: 2.5em;
		    background-color: #73859f;
		    background-color: rgba(115,133,159,.5);
		    border-width: 0.15em;
		    margin-top: -1.25em;
		    margin-left: -1.75em;
		}
		/* 中间的播放箭头 */
		.vjs-big-play-button .vjs-icon-placeholder {
		    font-size: 1.63em;
		}
		/* 加载圆圈 */
		.vjs-loading-spinner {
		    font-size: 2.5em;
		    width: 2em;
		    height: 2em;
		    border-radius: 1em;
		    margin-top: -1em;
		    margin-left: -1.5em;
		}
		.video-js.vjs-playing .vjs-tech {
		    pointer-events: auto;
		}

		/*进度显示当前播放时间*/
/*		.video-js .vjs-time-control{display:block;}
		.video-js .vjs-remaining-time{display: none;}*/
    </style>
</head>

<body>
    <video id="my-player" class="video-js vjs-big-play-centered" width="480" height="320" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" playsinline>
        <source src="https://pic.solux.cn/Mobile/00_2018/tuipinzhi/video.mp4" type="video/mp4"></source>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
    </video>
    <script type="text/javascript">

    //设置播放器语言
    var options = { language: 'zh-CN',playbackRates: [1, 1.5, 2]};
    videojs.addLanguage('zh-CN', {
        "Play": '播放',
        "Pause": '暂停',
        "Fullscreen": "全屏",
		"Non-Fullscreen": "退出全屏",
		"Mute": "静音",
		"Unmute": "取消静音",
		"Play Video": "播放视频"
    });

    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');

        // 自动播放
        // this.play();

        // 监听视频播放结束
        this.on('ended', function() {
            videojs.log('视频播放结束');
        });
    });
    </script>
</body>

</html>